<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!-- <link rel="stylesheet" href="bootstrap-4.3.1-dist/css/bootstrap.css">
        <link rel="stylesheet" href="bootstrap-4.3.1-dist/css/bootstrap.min.css"> -->
        <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
        <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
        <script type="text/javascript" src="bootstrap-4.3.1-dist/js/bootstrap.bundle.min.js"></script>
        <style>
        
            .box{
                width: 1200px;
                /* 如果宽度不够的时候，那么子元素的盒子就会自动收缩，这就是当父级元素变成伸缩盒子的时候，子元素变成伸缩项的体现 */
                height: 500px;
                border: 1px solid #ff6700;
                /* dsiplay:flex;就是把父级元素或者说父级容器变成一个伸缩盒子,那么会自动让子元素变成一个伸缩项 */
                display: flex;
                justify-content:space-around;

            }
            .first{
                width: 200px;
                height: 200px;
                background-color: red;
                flex-grow: 1;
                /* flex-grow 就是扩展子元素的宽度，就是来设置当前子元素应该占据剩余空间的多少宽度的
                    占据的百分比就是 当前元素的flex-grow / 包括当前子元素在内的所有子元素的flex-grow的和

                    没有添加flex-grow的值的话就默认是flex-grow值为0
                 */
            }
            .second{
                width: 200px;
                height: 200px;
                background-color: green;

                /*  当父级元素或者说父级容器的宽度不够用的时候，子元素的宽度怎么来分配呢
                    flex-shrink就是来干这个事儿的
                    flex-shrink的默认值是1，也就是说如果你不写，那么flex-shrink就是1
                    占据的比例的算法的flex-gprw是一样的
                    如果你不希望来分配这个空间的话，那么就把flex-shrink改为0，但是改为0的话可能会让内容溢出，所以设置的时候要谨慎设置
                 */
            }
            .third{
                width: 200px;
                height: 200px;
                background-color: blue;
                flex-grow: 2;
            }
            .fourth{
                width: 200px;
                height: 200px;
                background-color: greenyellow;
            }
            .fifth{
                width: 200px;
                height: 200px;
                background-color: pink;
            }
        
        </style>
    </head>
    <body>
        <div class="box">
            <div class="first">1</div>
            <div class="second">2</div>
            <div class="third">3</div>
            <div class="fourth">4</div>
            <div class="fifth">5</div>
        </div>
    </body>
</html>